<template>
  <view class="phxx-item-detail" style="padding-bottom: 0rpx">
    <view class="content-box">
      <view class="top block-back">
        <view class="cph-box">
          <view class="cph">
            {{ itemList.carBrand || '-' }}
          </view>
        </view>
        <view :class="{
            'gray-type': itemList.status == 8,
            'orange-type': itemList.status == 0 || itemList.status == 1,
            'blue-type':
              itemList.status == 2 ||
              itemList.status == 3 ||
              itemList.status == 4 ||
              itemList.status == 5 ||
              itemList.status == 6,
            'green-type': itemList.status == 7,
            'red-type': itemList.status == 9 || itemList.status == 10,
            status: true
          }">
          {{ statusName }}
        </view>
      </view>
      <view class="bottom block-back">
        <view class="title-box">基本信息</view>
        <view class="line"></view>
        <view class="items">
          <text class="til col99">运价(元/吨):</text>
          <text class="val col33">{{ itemList.freightRate || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">路损:</text>
          <text class="val col33">{{ itemList.roadLoss || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">煤价(元/吨):</text>
          <text class="val col33">{{ itemList.coalPrice || '' }}</text>
        </view>
      </view>
      <view class="bottom block-back">
        <view class="title-box">采购信息</view>
        <view class="line"></view>
        <view class="items">
          <text class="til col99">采购方:</text>
          <text class="val col33">{{ itemList.purchase || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">承运单位:</text>
          <text class="val col33">{{ itemList.cusTransport || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">煤种:</text>
          <text class="val col33">{{ itemList.proName || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">装货地:</text>
          <text class="val col33">{{ itemList.loadingSiteName || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">卸货点:</text>
          <text class="val col33">{{ itemList.landingPointName || '' }}</text>
        </view>
      </view>

      <view class="bottom block-back">
        <view class="bottom title-box">运输情况</view>
        <view class="line mgrb20"></view>
        <view class="bottom title-box1">
          <view class="til-icon-name"></view>矿发信息
        </view>
        <view class="bottom block-items">
          <view class="items gray-back">
            <view class="til col99 font13">矿发毛重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.mineralGrossWeight || '-'
              }}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">矿发皮重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.mineralTareWeight || '-'
              }}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">矿发净重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.mineralNetWeight || '-'
              }}</view>
          </view>
        </view>
        <view class="items">
          <text class="til col99">矿发时间:</text>
          <text class="val col33">{{ itemList.mineralTime || '' }}</text>
        </view>
        <view class="items mgrb20">
          <text class="til col99">矿发磅单:</text>
          <image v-if="itemList.mineralPoundList" class="val col33" @click="clickImg(itemList.mineralPoundList)"
            :src="itemList.mineralPoundList" style="width: calc(100% - 200rpx)"></image>
        </view>

        <view class="items mgrb20" style="width: 100%">
          <text class="til col99">铅封照片:</text>
          <view v-for="(imageSrc, index) in itemList.sealPhotographs" :key="index">
            <image class="val col33" @click="clickImg(imageSrc)" :src="imageSrc || ''" style="width: 80px;padding: 6px">
            </image>
          </view>
        </view>

        <view class="bottom title-box1">
          <view class="til-icon-name"></view>到站信息
        </view>
        <view class="bottom block-items">
          <view class="items gray-back">
            <view class="til col99 font13">到站毛重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.grossWeight || '-'
              }}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">到站皮重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.tareWeight || '-'
              }}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">到站净重(吨)</view>
            <view class="val col00 font16 fontwtb">{{
              itemList.netWeight || '-'
              }}</view>
          </view>
        </view>
        <view class="items">
          <text class="til col99">到站录皮时间:</text>
          <text class="val col33">{{ itemList.tareTime || '' }}</text>
        </view>
        <view class="items">
          <text class="til col99">站台磅单:</text>
          <image v-if="itemList.platformScale" class="val col33" @click="clickImg(itemList.platformScale)"
            :src="itemList.platformScale" style="width: calc(100% - 200rpx)"></image>
        </view>
        <view class="bottom block-items" style="padding: 20rpx !important">
          <view class="items blue-back">
            <text class="til col99 font13">亏吨(吨):</text>
            <text class="val col00 font16 fontwtb">{{
              itemList.deficientTon || '-'
              }}</text>
          </view>
          <view class="items blue-back">
            <text class="til col99 font13">涨吨(吨):</text>
            <text class="val col00 font16 fontwtb">{{
              itemList.riseTon || '-'
              }}</text>
          </view>
          <view class="items blue-back">
            <text class="til col99 font13">扣费(元):</text>
            <text class="val col00 font16 fontwtb">{{
              itemList.deductPrice || '-'
              }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDeliverOne } from '@/api/system/goods.js';
  export default {
    name: 'row-number',
    data() {
      return {
        detailType: 1, // 1:待审核  2：待称毛  3：已完成
        statusName: '',
        statusLists: [
          '待供应商审核', //0
          '待采购方审核', //1
          '待入场', //2
          '待称毛', //3
          '待确认', //4
          '待录皮', //5
          '待出厂', //6
          '已完成', //7
          '已作废', //8
          '已终止', //9
          '挂起' //9
        ],
        itemList: {
          carBrand: undefined,
          status: undefined,
          freightRate: undefined,
          roadLoss: undefined,
          coalPrice: undefined,
          purchase: undefined,
          cusTransport: undefined,
          proName: undefined,
          loadingSiteName: undefined,
          unloadingPlace: undefined,
          unloadingPoint: undefined,
          mineralTareWeight: undefined,
          mineralGrossWeight: undefined,
          mineralNetWeight: undefined,
          mineralTime: undefined,
          mineralPoundList: undefined,
          tareWeight: undefined,
          grossWeight: undefined,
          netWeight: undefined,
          tareTime: undefined,
          platformScale: undefined,
          deficientTon: undefined,
          riseTon: undefined,
          deductPrice: undefined,
          sealPhotographs: [],
          waybillRemark: undefined,
        }
      };
    },
    onLoad(option) {
      console.log(option, '============');
      this.getDetails(option.id);
    },
    methods: {
      clickImg(url) {
        uni.previewImage({
          urls: [url]
        });
      },
      async getDetails(id) {
        let datas = await getDeliverOne(id);
        if (datas.code == 200) {
          this.itemList = datas.data;
          this.statusName = this.statusLists[Number(this.itemList.status)];
        }
      },
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cph-box {
    min-width: 160rpx;
    background: #ffe24a;
    overflow: hidden;
    height: 88rpx;
    border-radius: 5rpx;

    .cph {
      font-weight: bold;
      font-size: 20px;
      min-width: 160rpx;
      border: 1px solid #333;
      padding: 0 14rpx;
      margin: 4rpx;
      border-radius: 5rpx;
      height: 80rpx;
      line-height: 80rpx;
    }
  }
</style>